<template>
  <div class="logParam tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:242px">
            <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </div>&emsp;
      <div class="state-radio-wrap">
        <el-radio-group v-model="stateRadio" @change="setLogType()" size="small">
          <el-radio-button :label="1">日志</el-radio-button>
          <el-radio-button :label="2">状态</el-radio-button>
          <el-radio-button :label="3">参数</el-radio-button>
        </el-radio-group>
      </div>&emsp;
      <el-button @click="setLogType()"><i class="iconfont icon-sousuo"></i>查询</el-button>
      <el-button @click="exportExcel()" type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <div class="currency-mode-wrap">
      <yf-tabs type="border-card" v-model="tabActive" @tab-click="toggleTab">
        <yf-tab-pane :name="1" label="分析仪">
          <div class="tablebox" style="height: calc(100% - 35px)">
            <el-table
              :data="tableData"
              ref="analyzer"
              border
              height="100%"
              style="width: 100%">
              <el-table-column
                type="index"
                label="序号">
              </el-table-column>
              <el-table-column
                prop="dataTime"
                label="时间">
              </el-table-column>
              <el-table-column
                prop="codeName"
                label="因子名称">
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称">
              </el-table-column>
              <el-table-column
                prop="describe"
                label="描述">
              </el-table-column>
            </el-table>
          </div>
          <div class="paginationBox">
            <el-pagination
              @size-change="paginationSizeChange"
              @current-change="paginationChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              background
              :small = "true"
              popper-class = "select-common-option"
              :page-sizes = "pageList"
              layout="total,sizes,slot,->,prev, pager, next, jumper"
              :total="totalRecords">
              <span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>
            </el-pagination>
          </div>
        </yf-tab-pane>
        <yf-tab-pane :name="2" label="工控机/数采仪">
          <div class="tablebox" style="height: calc(100% - 35px)">
            <el-table
              :data="tableData2"
              ref="instrument"
              border
              height="100%"
              style="width: 100%">
              <el-table-column
                type="index"
                label="序号">
              </el-table-column>
              <el-table-column
                prop="dataTime"
                label="时间">
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称">
              </el-table-column>
              <el-table-column
                prop="describe"
                label="描述">
              </el-table-column>
            </el-table>
          </div>
          <div class="paginationBox">
            <el-pagination
              @size-change="paginationSizeChange"
              @current-change="paginationChange"
              :current-page.sync="currentPageB"
              :page-size="pageSizeB"
              background
              :small = "true"
              popper-class = "select-common-option"
              :page-sizes = "pageListB"
              layout="total,sizes,slot,->,prev, pager, next, jumper"
              :total="totalRecordsB">
              <span class="el-pagination__current">当前第{{currentPageB}}/{{totalPageB}}页</span>
            </el-pagination>
          </div>
        </yf-tab-pane>
        <yf-tab-pane :name="3" label="辅助设备">
          <div class="tablebox" style="height: calc(100% - 35px)">
            <el-table
              :data="tableData3"
              ref="equipment"
              border
              height="100%"
              style="width: 100%">
              <el-table-column
                type="index"
                label="序号">
              </el-table-column>
              <el-table-column
                prop="date"
                label="时间">
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称">
              </el-table-column>
              <el-table-column
                prop="describe"
                label="描述">
              </el-table-column>
            </el-table>
          </div>
          <div class="paginationBox">
            <el-pagination
              @size-change="paginationSizeChange"
              @current-change="paginationChange"
              :current-page.sync="currentPageC"
              :page-size="pageSizeC"
              background
              :small = "true"
              popper-class = "select-common-option"
              :page-sizes = "pageListC"
              layout="total,sizes,slot,->,prev, pager, next, jumper"
              :total="totalRecordsC">
              <span class="el-pagination__current">当前第{{currentPageC}}/{{totalPageC}}页</span>
            </el-pagination>
          </div>
        </yf-tab-pane>
      </yf-tabs>
    </div>
  </div>
</template>

<script>
  import {exportTableData} from '../../assets/js/tableExport'
  export default {
    name: "logParam",
    data() {
      return {
        dateRange: "",
        stateRadio:1,
        tabActive:1,
        logType:'',
        currentPage:1, //分页组件当前页
        pageSize:10, //分页每页多少条数据
        pageList:[5,10,15], //总条数
        totalRecords:0, //设置每页多少条

        currentPageB: 1, //分页组件当前页
        pageSizeB: 10, //分页每页多少条数据
        totalRecordsB: 0, //总条数
        pageListB: [10, 15, 20], //设置每页多少条

        currentPageC: 1, //分页组件当前页
        pageSizeC: 10, //分页每页多少条数据
        totalRecordsC: 0, //总条数
        pageListC: [10, 15, 20], //设置每页多少条

        tableData:[],
        tableData2:[],
        tableData3:[],
        stationId:'',
        stationName:'',
        fieldList:[],
        fieldListA:['dataTime','codeName','name','describe'],
        fieldListB:['dataTime','name','describe'],
        fieldListC:['date','name','describe']
      };
    },
    computed:{
      totalPage() {
        //计算总页数
        let number = 0;
        number = Math.ceil(this.totalRecords / this.pageSize);
        return number === 0 ? 1 : number;
      },
      totalPageB() {
        //计算总页数
        let number = 0;
        number = Math.ceil(this.totalRecordsB / this.pageSizeB);
        return number === 0 ? 1 : number;
      },
      totalPageC() {
        //计算总页数
        let number = 0;
        number = Math.ceil(this.totalRecordsC / this.pageSizeC);
        return number === 0 ? 1 : number;
      },
      stationInfo: {
        get: function() {
          return this.$store.state.stationInfo;
        }
      }
    },
    methods:{
      toggleTab(val){
        this.setLogType();
      },
      setLogType(){
        // this.stateRadio,
        // this.tabActive,
        let radio = this.stateRadio;
        let active = this.tabActive;
        if(active === 1 && radio === 1){
          this.logType = 'ONLINE_MONITOR_LOG';
        }else if(active === 1 && radio === 2){
          this.logType = 'ONLINE_MONITOR_STATUS';
        }else if(active === 1 && radio === 3){
          this.logType = 'ONLINE_MONITOR_PARAM';
        }else if(active === 2 && radio === 1){
          this.logType = 'DATA_GATHER_LOG';
        }else if(active === 2 && radio === 2){
          this.logType = 'DATA_GATHER_STATUS';
        }else if(active === 2 && radio === 3){
          this.logType = 'AS';
        }else if(active === 3 && radio === 1){
          this.logType = 'AD';
        }else if(active === 3 && radio === 2){
          this.logType = 'AF';
        }else if(active === 3 && radio === 3){
          this.logType = 'AG';
        }
        this.getStatusData();
      },
      paginationChange(val) {
        //分页页码改变时执行
        if(this.tabActive === 1){
          this.currentPage = val;
        }else if(this.tabActive === 2){
          this.currentPageB = val;
        }else if(this.tabActive === 3){
          this.currentPageC = val;
        }
        this.getStatusData();
      },
      paginationSizeChange(val) {
        //分页pageSize改变时执行
        if(this.tabActive === 1){
          this.pageSize = val;
        }else if(this.tabActive === 2){
          this.pageSizeB = val;
        }else if(this.tabActive === 3){
          this.pageSizeC = val;
        }
        this.getStatusData();
      },
      //CQtestData/logStatusData
      getStatusData(){
        let pageNumber = '';
        let pageSize = '';
        if(this.tabActive === 1){
          pageNumber = this.currentPage;
          pageSize = this.pageSize;
        }else if(this.tabActive === 2){
          pageNumber = this.currentPageB;
          pageSize = this.pageSizeB;
        }else if(this.tabActive === 3){
          pageNumber = this.currentPageC;
          pageSize = this.pageSizeC;
        }
        this.$http.get("/Quality/CQtestData/logStatusData", {
            params: {
              beginTime: this.dateRange[0].format('yyyy-MM-dd hh:mm:ss'),
              endTime: this.dateRange[1].format('yyyy-MM-dd hh:mm:ss'),
              logType: this.logType,
              mn: this.stationId,
              pageNumber,
              pageSize
            }
          }).then(res => {
            if (res.data.code === 0) {
              if(this.tabActive === 1){
                if(res.data.content){
                  this.tableData = res.data.content.dataList;
                  this.totalRecords = res.data.content.totalRecords;
                }else{
                  this.tableData = [];
                  this.totalRecords = 0;
                }
              }else if(this.tabActive === 2){
                if(res.data.content){
                  this.tableData2 = res.data.content.dataList;
                  this.totalRecordsB = res.data.content.totalRecords;
                }else{
                  this.tableData2 = [];
                  this.totalRecordsB = 0;
                }
              }else if(this.tabActive === 3){
                if(res.data.content){
                  this.tableData3 = res.data.content.dataList;
                  this.totalRecordsC = res.data.content.totalRecords;
                }else{
                  this.tableData3 = [];
                  this.totalRecordsC = 0;
                }
              }
            }
          }).catch(error => {

        });
      },

      //导出
      exportExcel(){
        let {analyzer,instrument,equipment} = this.$refs;
        let tableBox = null;
        let tableName = '';
        if(this.tabActive === 1){
          tableBox = analyzer.$el;
          tableName = '分析仪';
          this.fieldList = JSON.parse(JSON.stringify(this.fieldListA));
        }else if(this.tabActive === 2){
          tableBox = instrument.$el;
          tableName = '工控机/数采仪';
          this.fieldList = JSON.parse(JSON.stringify(this.fieldListB));
        }else if(this.tabActive === 3){
          tableBox = equipment.$el;
          tableName = '辅助设备';
          this.fieldList = JSON.parse(JSON.stringify(this.fieldListC));
        }
        let header = tableBox.querySelector('.el-table__header');
        let title = this.stationName+tableName+'日志';
        let params = {
          headerProp:this.fieldList.join(','),
          startTime: this.dateRange[0].format('yyyy-MM-dd hh:mm:ss'),
          endTime: this.dateRange[1].format('yyyy-MM-dd hh:mm:ss'),
          logType: this.logType,
          indexCodes:'',
          stationCodes: this.stationId,
          tableType:'LOG_STATUS_DATA',
          ifCurrentSection:true,
          pattern:'yyyy-MM-dd HH:mm:ss'
        };
        exportTableData(header,title,'','1',"/Quality/exports/testDataExcel",params);
      }
    },
    mounted(){
      // this.createdChart();

    },
    created() {
      this.$store.commit("setShowlefttree", true);
      this.dateRange = [new Date(new Date().setDate(new Date().getDate()-10)), new Date()];
      this.fieldList = this.fieldListA;
    },
    watch: {
      stationInfo(value) {
        if (value.length > 0) {
          this.stationId = value[0].nodeId;
          this.stationName = value[0].nodeName;
          this.setLogType();
        }
      },
      logType(value){
        // this.getStatusData();
      }
    }
  };
</script>

<style scoped lang="less">
  .logParam {
    .tablebox{
      height: 100%;
    }
  }
  .state-radio-wrap{
    display: inline-block;
    vertical-align: top;
  }
</style>
